<!--中间分割线，分割左侧表格和右侧图表-->
<template>
	<div @mousedown="down"  ref="split_liu" :style="{left:Number(left)?left+'px':left}" class="gante-split-liu">
		<!--<div class="gante-split-column">-->
			<!--<div></div>-->
			<!--<div></div>-->
			<!--<div></div>-->
		<!--</div>-->
		<div v-show="show_split" :style="{left:split_resize_left+'px'}" class="gante-split-liu-resize"></div>
	</div>
</template>
<script>
    import searchLastWidth from './search_last_width'
	export default{
        mixins:[searchLastWidth],
		data(){
			return{
				show_split:false,
				split_resize_left:0,
				mouseDown:false
			}
		},
		props:['left','th_data'],
		mounted(){

		},
		methods:{
			//      获取元素距离浏览器的距离
			getPos(ele){
				var p=ele.offsetParent;
				var left=ele.offsetLeft;
				var top=ele.offsetTop
				while(p){
					if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
						left+=p.offsetLeft;
						top+=p.offsetTop;
					}else{
						left+=p.offsetLeft+p.clientLeft;
						top+=p.offsetTop+p.clientTop;
					}
					p=p.offsetParent;
				}
				var obj={};
				obj.x=left;
				obj.y=top;
				return obj;
			},
			doc_move(e){
				if(this.mouseDown){
					var _body = document.getElementsByTagName('body')[0];
					let _left = e.pageX - this.$refs.split_liu.getBoundingClientRect().left +3, // 移动的距离
                        _width = document.getElementsByClassName('gante-table-box')[0].offsetWidth, // 表格的宽度
                        _width_gc = document.getElementsByClassName('ganteview-box')[0].offsetWidth; // 图表的宽度
					console.log(_left)
					if(_left + _width <= 480){
                        _left = 480 - _width
                    }
				    if(_width_gc - _left <= 30){
                        _left = _width_gc - 30
                    }
					this.split_resize_left = _left;
					_body.style.cursor = 'e-resize'
				}
			},
			doc_up(){
				if(this.mouseDown){
					var _body = document.getElementsByTagName('body')[0]
					this.$parent.tabe_width = this.split_resize_left + document.getElementsByClassName('gante-table-box')[0].offsetWidth;
                    this.find_attr(this.$parent.tabe_width,this.th_data)
					this.show_split = false
					this.split_resize_left = 0
					this.mouseDown = false
					_body.classList.remove('unselecttable')
					_body.style.cursor = null
					document.removeEventListener('mousemove',this.doc_move,false)
					document.removeEventListener('mouseup',this.doc_up,false)
				}
			},
			down(){
				this.mouseDown = true
				this.show_split = true
				document.getElementsByTagName('body')[0].classList.add('unselecttable')
				document.addEventListener('mousemove',this.doc_move,{passive:false})
				document.addEventListener('mouseup',this.doc_up,{passive:false})
			}
		}
	}
</script>
<style>
	.gante-split-liu{
		width: 3px;
		background: #ccc;
		height: 100%;
		position: absolute;
        top: 0;
		cursor: e-resize;
		z-index:2;
		transition: background .1s ease;
	}
	.gante-split-liu:hover{
		background:#666 ;
	}
	.gante-split-column{
		position: absolute;
		top:50%;
		width: 100%;
		height:50px;
		margin-top: -25px;
		left: 0;
	}
	.gante-split-column div{
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background: #fff;
		margin: 3px auto;
	}
	.gante-split-liu-resize{
		position: absolute;
		top:0;
		width: 3px;
		background: #ccc;
		height: 100%;
	}
</style>
